<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>

</head>
<body>
  <button>点击获取所有的战士</button>
  <script>
    //接口    axios.get
    /**
     * 请求类型  get
     * 请求 URL  http://api.xiaohigh.com/heros
     * 请求参数   参数名    参数值
     *           type      类型: 战士, 法师, 辅助
     * 响应结果  JSON
     * 请求示例: http://api.xiaohigh.com/heros?type=辅助
     * 
     * 考察点: params 属性
     */
    let btn = document.querySelector('button');

    btn.onclick = async function(){                  // 配置对象
      let res = await axios.get('http://api.xiaohigh.com/heros', {
        params: {
          type: '战士'
        }
      });
      console.log(res);
    }

  </script>
</body>
</html>